<template>
  <div class="content-more">
    <div class="content-more-header">
      <div class="header-callback">
        <el-page-header
          class="header-page"
          :content="columnName"
          @back="goBack"
        />
      </div>
    </div>
    <div class="content-more-body">
      <component
        :is="templateName"
        v-if="templateName"
        :layout="layoutStyle"
        :show-header="true"
        :temp="temp"
        @fetch-entity="entityTempCallBack"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileMore',
  data() {
    return {
      column: {},
      mb: null,
      dl: null,
      fl: null,
      templateName: null,
      menuName: '',
      menuId: null,
      columnName: '',
      temp: {},
      layoutStyle: {},
      customHeader: {},
      titleStyle: {},
      titleFont: {},
      activeFont: {}
    };
  },
  watch: {
    column: {
      handler(newName, oldName) {
        // 值发生变化时
        if (undefined !== newName && newName !== null) {
          if (newName.showHeader === true) {
            this.mb = newName.mb;
            this.dl = newName.mbdl;
            this.fl = newName.mbfl;
            this.temp = newName;
            this.menuName = newName.menuName;
            this.menuId = newName.menuId;
            this.columnName = newName.columnName;
            const path = '/' + this.dl + '/' + this.fl + '/more/' + this.mb;
            const res = () => import(`@/template${path}`);
            this.templateName = res;
          } else {
            this.mb = newName.data.mb;
            this.dl = newName.data.mbdl;
            this.fl = newName.data.mbfl;
            this.menuName = newName.menu.name;
            this.menuId = newName.menu.id;
            this.columnName = newName.name;
            this.temp = newName.data;
            const path = '/' + this.dl + '/' + this.fl + '/more/' + this.mb;
            const res = () => import(`@/template${path}`);
            this.templateName = res;
          }
        } else {
          this.templateName = null;
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    init(data1, data2) {
      this.column = data1;
      this.layout = data2;
    },
    goBack() {
      this.$emit('callBack', this.menuId, this.layout);
    },
    entityTempCallBack(data) {
      const column = data.setting;
      data.setting = this.column;
      data.column = column;
      this.$emit('parent-entity', data);
    }
  }
};
</script>

<style scoped>
.content-more {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  /* background-color: #ffffff; */
  background: #409eff0f;
}
.content-more-header {
  flex: 0 1 auto;
  height: 40px;
  line-height: 40px;
  width: 100%;
}
.header-callback {
  height: 100%;
  width: 100%;
  line-height: 40px;
  padding: 0px 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #e4e7ed;
}
.header-page {
  line-height: 40px;
}
.el-page-header >>> .el-page-header__content {
  font-size: 16px;
}
.content-more-body {
  flex: 1 1 auto;
  width: 100%;
}
</style>
